<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试</title>
    <script src="../js/jquery.min.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<style>
    .checkAns {
        display: none;
        width: 700px;
        height: 650px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 60%;
        background: #ffffff;
        box-shadow: 0px 0px 20px #ddd;
        z-index: 9997;
        transform: translate(-50%, -50%);
    }

    .bgone {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: rgba(0, 0, 0, .3);
    }

    a {
        text-decoration: none;
        color: #000000;
    }
    .checkAns-title{
        width: 100%;
        margin: 10px 0px 0px 0px;
        text-align: center;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        position: relative;
        cursor: move;
    }
    .checkAns-title span {
        position: absolute;
        font-size: 12px;
        right: -20px;
        top: -30px;
        background: #ffffff;
        border: #ebebeb solid 1px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>客户端考试</legend>
</fieldset>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

    <ul class="layui-tab-title">
        <li class="layui-this">我的考试</li>
        <li>考试记录</li>
    </ul>

    <div class="layui-tab-content" style="height: 100px;">
        <!-- ********************* -->
        <!-- ******************第一部分：我的考试******************************** -->
        <div class="layui-tab-item  layui-show">
            <div style="margin-top: 20px;">
                <form class="layui-form layui-form-pane" method="POST" action="">
                    <%--<div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="course" lay-filter="course">
                                <option value="">考试状态</option>
                                <option value="1">进行中</option>
                                <option value="2">已结束</option>
                            </select>
                        </div>
                    </div>--%>
                    <input type="text" class="layui-input" id="beginTime" placeholder="开始时间"
                           style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;"
                           name="beginTime">
                    <input type="text" class="layui-input" id="endTime" placeholder="结束时间"
                           style="width: 200px;display: inline-block;margin-right: 20px;margin-left: 20px;"
                           name="endTime">
                    <button type="button" class="layui-btn searchmyexam">搜索</button>

                </form>
            </div>
            <!-- 表单 -->
            <hr>
            <!-- 表格 -->
            <%-- <table class="layui-table">
                 <thead>
                     <tr>
                         <th>考试id</th>
                         <th>考试名</th>
                         <th>考试时间</th>
                         <th>考试时长</th>
                         <th>卷面总分</th>
                         <th>及格分</th>
                         <th>考试状态</th>
                         <th>操作（开始考试、继续考试）</th>
                     </tr>
                 </thead>
                 <tbody id="demoList">
                     <tr>
                         <td>1</td>
                         <td>java测试1</td>
                         <td>2020-05-22~2020-05-23</td>
                         <td>120分钟</td>
                         <td>100分</td>
                         <td>60分</td>
                         <td>进行中</td>
                         <td>
                             <!-- 判断是否考试完决定考试状态 -->
                             <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">开始考试</button>
                           <!--  <button type="button" class="layui-btn layui-btn-xs layui-btn-normal">继续考试</button> -->
                         </td>
                     </tr>
                 </tbody>
             </table>
             <div id="page1"></div>--%>
            <table class="layui-table" id="allmyexam" lay-filter="allmyexam"></table>
            <script type="text/html" id="barDemo1">
                <%--                    进行判断 是否开始考试还是继续考试 onclick="isornoclick()"--%>
                <a class="layui-btn layui-btn-xs" lay-event="beginexam">开始考试</a>
            </script>
        </div>


        <!-- ******************第二部分：考试记录******************************** -->
        <div class="layui-tab-item">

            <div style="margin-top: 20px;">
                <form class="layui-form layui-form-pane" method="POST" action="">
                    <div class="layui-inline" style="margin-right: 20px;">
                        <div class="layui-input-inline">
                            <select name="course" lay-filter="course" id="course">
                                <option value="">请选择考试类别</option>
                                <option value="10002">JavaOOP</option>
                                <option value="10003">MySQL</option>
                                <option value="10004">设计模式</option>
                                <option value="10005">Java并发</option>
                            </select>
                        </div>
                    </div>
                    <button type="button" class="layui-btn searchmyexamrecord">搜索</button>
                </form>
            </div>
            <!-- 表单 -->
            <hr>
            <!-- 表格 -->
            <table class="layui-table" id="allmyexamrecord" lay-filter="allmyexamrecord"></table>
            <script type="text/html" id="barDemo2">
                <%--   进行判断 是否查看答案还是继续考试还是超时未考试  点击某个按钮来决定？--%>
           <%--     <c:forEach var="myexam" items="${myexamlist}">
                    <c:if test="${myexam.exam_state=='超时未交卷'}">
                        <a>超时未交卷</a>
                    </c:if>
                    <c:if test="${myexam.exam_state=='已完成'}">
                        <a class="layui-btn layui-btn-xs" lay-event="checkAnswer">查看答案</a>
                    </c:if>
                </c:forEach>--%>
                <a class="layui-btn layui-btn-xs" lay-event="checkAnswer">查看答案</a>
            </script>
        </div>
        <!-- ********************* -->
    </div>

</div>
<%--    查看答案弹出层--%>
<%--<div id="checkAns" class="checkAns" style="width: 800px;">
    <div id="titleone" class="checkAns-title">查看试卷
    <span><a href="javascript:void(0);" class="closeone">关闭</a></span>
    </div>
    <hr>
    <iframe src="/OnlineExam/user/checkmyexampaper.jsp"  style="display:block;width:100%;height:500px"
            frameborder="0" scrolling="yes"></iframe>
</div>
&lt;%&ndash;    遮罩层&ndash;%&gt;
<div id="bgone" class="bgone"></div>--%>
</body>
<script src="../layui/layui.js"></script>
<script>
    var isclick = false;

    //判断开始按纽是否被点击
    function isornoclick() {
        isclick = true;
    }

    layui.use(['element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'table'], function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var laypage = layui.laypage,
            layer = layui.layer;
        var table = layui.table;
        //执行一个laydate实例
        laydate.render({
            elem: '#beginTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });

        //显示所有 我的考试
        table.render({
            elem: '#allmyexam',
            url: '/OnlineExam/admin/stuexam?m=showmyexam&method=1',
            page: true,
            cols: [[
                {field: 'examrecord_id', title: '考试记录id', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_name', title: '考试名', width: '20%', sort: true, fixed: 'left'}
                , {field: 'exam_start_date', title: '考试开始时间', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_end_date', title: '考试结束时间', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_time_limit', title: '考试时长(分钟)', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exampaper_score', title: '卷面总分', width: '10%'}
                , {field: 'exampaper_passscore', title: '及格分', width: '10%'}
                , {field: 'exam_state', title: '考试状态', width: '10%'}
                , {fixed: 'right', width: '10%', align: 'center', toolbar: '#barDemo1'}
            ]]

        })
        //按条件显示我的考试
        $(".searchmyexam").click(function () {
            var beginTime = document.querySelector("#beginTime").value;
            var endTime = document.querySelector("#endTime").value;
            table.reload('allmyexam', {
                elem: '#allmyexam',
                url: '/OnlineExam/admin/stuexam?m=showmyexam',
                // id:'myexampaper',
                where: {
                    'method': 2,
                    'beginTime': beginTime,
                    'endTime': endTime
                },
                page: true,
                cols: [[
                    {field: 'examrecord_id', title: '考试记录id', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_name', title: '考试名', width: '20%', sort: true, fixed: 'left'}
                    , {field: 'exam_start_date', title: '考试开始时间', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_end_date', title: '考试结束时间', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_time_limit', title: '考试时长(分钟)', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_score', title: '卷面总分', width: '10%'}
                    , {field: 'exampaper_passscore', title: '及格分', width: '10%'}
                    , {field: 'exam_state', title: '考试状态', width: '10%'}
                    , {fixed: 'right', width: '10%', align: 'center', toolbar: '#barDemo1'}
                ]]

            })
        })

        //*******************************************************
        //显示所有 我的考试记录
        table.render({
            elem: '#allmyexamrecord',
            url: '/OnlineExam/admin/stuexam?m=showmyexamrecord&method=1',
            page: true,
            cols: [[
                {field: 'examrecord_id', title: '考试记录id', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_name', title: '考试名', width: '20%', sort: true, fixed: 'left'}
                , {field: 'exam_start_date', title: '考试开始时间', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_end_date', title: '考试结束时间', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exam_time_limit', title: '考试时长', width: '10%', sort: true, fixed: 'left'}
                , {field: 'exampaper_score', title: '卷面总分', width: '10%'}
                , {field: 'exampaper_passscore', title: '及格分', width: '10%'}
                , {field: 'exam_time', title: '我的考试时间', width: '10%'}
                , {field: 'exam_usetime', title: '我的考试用时', width: '10%'}
                , {field: 'exam_score', title: '我的得分', width: '10%'}
                // , {field: 'exam_state', title: '考试状态', width: '10%'}
                , {fixed: 'right', width: '10%', align: 'center', toolbar: '#barDemo2'}
            ]]

        })

        //按条件显示我的考试记录
        $(".searchmyexamrecord").click(function () {
            var course = document.querySelector("#course").value;
            table.reload('allmyexamrecord', {
                elem: '#allmyexamrecord',
                url: '/OnlineExam/admin/stuexam?m=showmyexamrecord',
                // id:'myexampaper',
                where: {
                    'method': 2,
                    'course': course
                },
                page: true,
                cols: [[
                    {field: 'examrecord_id', title: '考试记录id', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_name', title: '考试名', width: '20%', sort: true, fixed: 'left'}
                    , {field: 'exam_start_date', title: '考试开始时间', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_end_date', title: '考试结束时间', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exam_time_limit', title: '考试时长', width: '10%', sort: true, fixed: 'left'}
                    , {field: 'exampaper_score', title: '卷面总分', width: '10%'}
                    , {field: 'exampaper_passscore', title: '及格分', width: '10%'}
                    , {field: 'exam_time', title: '我的考试时间', width: '10%'}
                    , {field: 'exam_usetime', title: '我的考试用时', width: '10%'}
                    , {field: 'exam_score', title: '我的得分', width: '10%'}
                    // , {field: 'exam_state', title: '考试状态', width: '10%'}
                    , {fixed: 'right', width: '10%', align: 'center', toolbar: '#barDemo2'}
                ]]
            })
        })

        //监听行工具事件
        table.on('tool(allmyexam)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            console.log("当前行数据：" + data);

            if (layEvent === 'beginexam') {
                layer.confirm("您确定开始" + data.exam_name + "的考试吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已开始考试--》" + data.exam_name + "--" + data.examrecord_id);
                    location.href = "http://localhost:8080/OnlineExam/admin/stuexam?m=findmyexamrecordbysth&exam_id=" + data.exam_id + "&exam_start_date=" + data.exam_start_date + "&exam_end_date=" + data.exam_end_date + "&examrecord_id=" + data.examrecord_id;
                    layer.close(index);
                })
            }
        });
/*        var checkAns = document.querySelector("#checkAns");
        var bgone = document.querySelector(".bgone");
        var closeone = document.querySelector(".closeone");
        var titleone = document.querySelector("#titleone");
        closeone.onclick = function () {
            checkAns.style.display = 'none';
            bgone.style.display = 'none';
        }
        titleone.addEventListener('mousedown', function (e) {
            var x = e.pageX - checkAns.offsetLeft;
            var y = e.pageY - checkAns.offsetTop;
            //（2）当鼠标移动时，把鼠标的页面中坐标减去  鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                checkAns.style.left = e.pageX - x + "px";
                checkAns.style.top = e.pageY - y + "px";
            }

            //（3）鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            })
        })*/
        table.on('tool(allmyexamrecord)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            console.log("当前行数据：" + data);
            if (layEvent === 'checkAnswer') {
  /*              checkAns.style.display = 'block';
                bgone.style.display = 'block';*/
                location.href = "/OnlineExam/admin/stuexam?m=checkexampaperquestion&exam_id=" + data.exam_id +"&examrecord_id=" + data.examrecord_id+"&exampaper_id="+data.exampaper_id;
              /*  layer.confirm("您确定查看" + data.exam_name + "的答题情况吗？", {btn: ['确定', '取消'], title: "提示"}, function (index) {
                    console.log("已开始查看--》" + data.exam_name + "--" + data.examrecord_id);
                    location.href = "/OnlineExam/admin/stuexam?m=checkexampaperquestion&exam_id=" + data.exam_id +"&examrecord_id=" + data.examrecord_id+"&exampaper_id="+data.exampaper_id;
                    layer.close(index);
                })*/
            }
        });


    })
</script>

</html>